import React, { useState, useEffect } from "react";
import { Card, Tag, Tooltip, Spin } from "antd";
import "./shareBox.scss";
const ShareBox = (props) => {
  const [shareList, setShareList] = useState();
  const [spinning, setSpinning] = useState(false); // loading
  useEffect(() => {
    setSpinning(true)
    setShareList(props.shareList)
    setSpinning(false)
  },[])
  return (
    <Spin tip="Loading..." spinning={ spinning }>
      <Card hoverable className="shareCardBox">
        {
          shareList? <div className="shareBox">
          <div className="shareImg">
            <img
              alt="example"
              src={shareList.shareImg?shareList.articleImg:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=225264473,1817553437&fm=26&gp=0.jpg"}
            />
          </div>
          <div className="shareInfo">
            <h2>{shareList.shareTopicTitle}</h2>
            <h4>学习方式：{ shareList.shareAdvice }</h4>
            <h4>学习推荐：{ shareList.shareAdvice?shareList.shareAdvice:'待输入' }</h4>
            <h4>资源链接：
            <Tooltip placement="top" title={`跳转地址：${shareList.shareResource?shareList.shareResource:'暂无'}`}>
              <span href={ shareList.shareResource } className="blue_link" target="_blank">{ shareList.shareResource?'是':'否' }</span>
            </Tooltip>
            </h4>
            <h5>
              简介：{ shareList.shareInfo }
            </h5>
            <p>
              <Tag color="#87d068">共 { shareList.count?shareList.count:15 } 篇</Tag>
              <span>更新时间：3 天前</span>
              <span>阅读数量：{ shareList.view_count }</span>
              <span style={{marginLeft:"10px"}}>未完结</span>
            </p>
          </div>
        </div>  :""
        }
        
      </Card>
    </Spin>
  );
};

export default ShareBox;
